<template>
  <div class="global">
    <div class="mainBody">
      <!-- 表格搜索 -->
      <!-- <div>
      <vxe-toolbar>
        <template #buttons>
          <vxe-input
            v-model="filterName2"
            type="search"
            placeholder="试试全表搜索"
            @keyup="searchEvent2"
          ></vxe-input>
        </template>
      </vxe-toolbar>
    </div> -->
      <!-- 表格 -->
      <div>
        <el-tabs type="border-card">
          <!-- 第一个tab -->
          <el-tab-pane label="名称/地理信息/生长特性">
            <el-tabs
              v-model="activeName"
              @tab-click="handleClick"
              :tab-position="tabPosition"
              style="height: 300px"
            >
              <!-- 名称tab -->
              <el-tab-pane label="名称" name="Name">
                <vxe-table
                  :data="tableData"
                  border
                  v-if="activeName === 'Name'"
                  ref="Name"
                  :subprojectId="subprojectId"
                >
                  <vxe-table-column field="Name" title=""></vxe-table-column>
                  <vxe-table-column
                    field="SampleValue1"
                    title="value"
                  ></vxe-table-column>
                </vxe-table>
              </el-tab-pane>
              <!-- 地理信息 -->
              <el-tab-pane label="地理位置" name="geographical"
                ><vxe-table
                  :data="tableData"
                  border
                  v-if="activeName === 'geographical'"
                  ref="geographical"
                  :subprojectId="subprojectId"
                >
                  <vxe-table-column
                    field="geographical"
                    title=""
                  ></vxe-table-column>
                  <vxe-table-column
                    field="SampleValue10"
                    title="value"
                  ></vxe-table-column> </vxe-table
              ></el-tab-pane>
              <!-- 生长性状 -->
              <el-tab-pane label="生长特征" name="growthTraits"
                ><vxe-table
                  height="300px"
                  :data="tableData"
                  border
                  v-if="activeName === 'growthTraits'"
                  ref="growthTraits"
                  :subprojectId="subprojectId"
                >
                  <vxe-table-column
                    field="growthTraits"
                    title=""
                  ></vxe-table-column>
                  <vxe-table-column
                    field="SampleValue7"
                    title="value"
                  ></vxe-table-column> </vxe-table></el-tab-pane
            ></el-tabs>
          </el-tab-pane>
          <!-- 第二个tab -->
          <el-tab-pane label="生物学特性/可数性状"
            ><el-tabs
              v-model="activeName"
              @tab-click="handleClick"
              :tab-position="tabPosition"
              style="height: 300px"
            >
              <!-- 生物学性状tab -->
              <el-tab-pane label="生物学特征" name="biologicalCharacter"
                ><vxe-table
                  :data="tableData"
                  border
                  v-if="activeName === 'biologicalCharacter'"
                  ref="biologicalCharacter"
                  :subprojectId="subprojectId"
                >
                  <vxe-table-column
                    field="biologicalCharacteristics"
                    title=""
                  ></vxe-table-column>
                  <vxe-table-column
                    field="SampleValue2"
                    title="value"
                  ></vxe-table-column> </vxe-table
              ></el-tab-pane>
              <!-- 可数性状 -->
              <el-tab-pane label="可数性状" name="fewCharacters">
                <vxe-table
                  :data="tableData"
                  border
                  v-if="activeName === 'fewCharacters'"
                  ref="fewCharacters"
                  :subprojectId="subprojectId"
                >
                  <vxe-table-column
                    field="fewCharacters"
                    title=""
                  ></vxe-table-column>
                  <vxe-table-column
                    field="SampleValue4"
                    title="value"
                  ></vxe-table-column>
                </vxe-table>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>

          <!-- 第三个tab -->
          <el-tab-pane label="可量性状">
            <el-tabs
              v-model="activeName"
              @tab-click="handleClick"
              :tab-position="tabPosition"
              style="height: 300px"
            >
              <el-tab-pane name="quantityTraits1" label="可量性状1"
                ><vxe-table
                  :data="tableData"
                  border
                  v-if="activeName === 'quantityTraits1'"
                  ref="quantityTraits1"
                  :subprojectId="subprojectId"
                >
                  <vxe-table-column
                    field="quantityTraits1"
                    title=""
                  ></vxe-table-column>
                  <vxe-table-column
                    field="SampleValue5"
                    title="value"
                  ></vxe-table-column> </vxe-table
              ></el-tab-pane>
              <el-tab-pane name="quantityTraits2" label="可量性状2"
                ><vxe-table
                  :data="tableData"
                  border
                  v-if="activeName === 'quantityTraits2'"
                  ref="quantityTraits2"
                  :subprojectId="subprojectId"
                >
                  <vxe-table-column
                    field="quantityTraits2"
                    title=""
                  ></vxe-table-column>
                  <vxe-table-column
                    field="SampleValue6"
                    title="value"
                  ></vxe-table-column> </vxe-table
              ></el-tab-pane> </el-tabs
          ></el-tab-pane>
          <!-- 第四个tab -->
          <el-tab-pane label="同工酶/染色体/样品类型"
            ><el-tabs
              v-model="activeName"
              @tab-click="handleClick"
              :tab-position="tabPosition"
              style="height: auto"
            >
              <!-- 同工酶 -->
              <el-tab-pane label="同工酶" name="isozyme"
                ><div class="isozyme">
                  <span>同工酶</span
                  ><span><img ref="image3" src="123" /></span></div
              ></el-tab-pane>
              <!-- 染色体 -->
              <el-tab-pane label="染色体" name="chromosome"
                ><vxe-table
                height="300px"
                  :data="tableData"
                  border
                  v-if="activeName === 'chromosome'"
                  ref="chromosome"
                  :subprojectId="subprojectId"
                >
                  <vxe-table-column
                    field="chromosome"
                    title=""
                  ></vxe-table-column>
                  <vxe-table-column
                    field="SampleValue9"
                    title="value"
                  ></vxe-table-column>
                </vxe-table>
                <div class="chromosome">
                  <span>染色体组</span
                  ><span><img ref="image2" src="123" /></span></div
              ></el-tab-pane>
              <!-- 样品类型 -->
              <el-tab-pane label="样品类型" name="sampleType"
                ><vxe-table
                  :data="tableData1"
                  border
                  v-if="activeName === 'sampleType'"
                  ref="sampleType"
                  :subprojectId="subprojectId"
                >
                  <vxe-table-column
                    field="sampleType"
                    title=""
                  ></vxe-table-column>
                  <vxe-table-column
                    field="SampleValue12"
                    title="value"
                  ></vxe-table-column> </vxe-table></el-tab-pane></el-tabs
          ></el-tab-pane>

          <!-- 第五个tab -->
          <el-tab-pane label="外形特征/外形图/表格信息"
            ><el-tabs
              v-model="activeName"
              @tab-click="handleClick"
              :tab-position="tabPosition"
              style="height: auto"
            >
              <!-- 外形特征 -->
              <el-tab-pane label="外形特征" name="shapeFeatures">
                <vxe-table
                  height="300px"
                  :data="tableData"
                  border
                  v-if="activeName === 'shapeFeatures'"
                  ref="shapeFeatures"
                  :subprojectId="subprojectId"
                >
                  <vxe-table-column
                    field="shapeFeatures"
                    title=""
                  ></vxe-table-column>
                  <vxe-table-column
                    field="SampleValue3"
                    title="value"
                  ></vxe-table-column>
                </vxe-table>
              </el-tab-pane>
              <!-- 外形图 -->
              <el-tab-pane label="外形图" name="contourMap"
                ><div class="contourMap">
                  <span>外形图</span
                  ><span><img ref="image1" src="123" /></span></div
              ></el-tab-pane>
              <!-- 表格信息 -->
              <el-tab-pane label="表格信息" name="formInformation"
                ><vxe-table
                  :data="tableData"
                  border
                  v-if="activeName === 'formInformation'"
                  ref="formInformation"
                  :subprojectId="subprojectId"
                >
                  <vxe-table-column
                    field="formInformation"
                    title=""
                  ></vxe-table-column>
                  <vxe-table-column
                    field="SampleValue11"
                    title="value"
                  ></vxe-table-column> </vxe-table
              ></el-tab-pane> </el-tabs></el-tab-pane
        ></el-tabs>
      </div>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="yeshu"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// import XEUtils from "xe-utils";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      subprojectId: "",
      activeName: "",
      yeshu: 10,
      nowYeShu: 1,
      tabPosition: "left",
      tableData: [
        {
          Name: "中文名称",
          SampleValue1: "",
          biologicalCharacteristics: "纲名",
          SampleValue2: "",
          shapeFeatures: "习性",
          SampleValue3: "",
          fewCharacters: "背鳍鳍式",
          SampleValue4: "",
          quantityTraits1: "体长",
          SampleValue5: "",
          quantityTraits2: "体重",
          SampleValue6: "",
          growthTraits: "年龄",
          SampleValue7: "",
          chromosome: "体细胞染色体数",
          SampleValue9: "",
          geographical: "原产地",
          SampleValue10: "",
          formInformation: "创建人",
          SampleValue11: "",
        },
        {
          Name: "英文名称",
          SampleValue1: "",
          biologicalCharacteristics: "目名",
          SampleValue2: "",
          shapeFeatures: "特征",
          SampleValue3: "",
          fewCharacters: "臀鳍鳍式",
          SampleValue4: "",
          quantityTraits1: "体长/体高",
          SampleValue5: "",
          quantityTraits2: "体长/头长",
          SampleValue6: "",
          growthTraits: "实测体长",
          SampleValue7: "",
          chromosome: "核型",
          SampleValue9: "",
          geographical: "东经",
          SampleValue10: "",
          formInformation: "修改人",
          SampleValue11: "",
        },
        {
          Name: "学名",
          SampleValue1: "",
          biologicalCharacteristics: "科名",
          SampleValue2: "",
          shapeFeatures: "外形",
          SampleValue3: "",
          fewCharacters: "侧线上鳞",
          SampleValue4: "",
          quantityTraits1: "头长/吻长",
          SampleValue5: "",
          quantityTraits2: "头长/眼径",
          SampleValue6: "",
          growthTraits: "实测体重",
          SampleValue7: "",
          chromosome: "核型公式",
          SampleValue9: "",
          geographical: "北纬",
          SampleValue10: "",
          formInformation: "创建时间",
          SampleValue11: "",
        },
        {
          biologicalCharacteristics: "属名",
          SampleValue2: "",
          //   shapeFeatures: "外形图",
          //   SampleValue3: '<img height="40" ref = "image1" src = "123">',
          fewCharacters: "侧线下鳞",
          SampleValue4: "",
          quantityTraits1: "头长/眼间距",
          SampleValue5: "",
          quantityTraits2: "体长/尾柄长",
          SampleValue6: "",
          chromosome: "染色体臀数",
          SampleValue9: "",
          formInformation: "修改时间",
          SampleValue11: "",
        },
        {
          biologicalCharacteristics: "种名",
          SampleValue2: "",
          fewCharacters: "鳃耙数",
          SampleValue4: "",
          quantityTraits1: "尾柄长/尾柄高",
          SampleValue5: "",
          //   chromosome: "染色体组型",
          //   SampleValue9: '<img height="40" ref = "image2" src = "123">',
        },
      ],
      tableData1: [
        // {
        //   isozyme: "同工酶",
        //   SampleValue8: '<img height="40" ref = "image3" src = "123">',
        // },
        { sampleType: "样品类型", SampleValue12: "" },
      ],
    };
  },
  computed: {
    showSearchValue1() {
      return Cookies.get("parameterValue1");
    },
    showSearchValue2() {
      return Cookies.get("queryParameter1");
    },
  },
  methods: {
    // 获取当前页数
    handleCurrentChange(val) {
      this.nowYeShu = `${val}`;
      this.accessnterface();
    },
    //   解决tab切换是宽度减小问题
    handleClick() {
      setTimeout(() => {
        this.$refs[this.activeName].initTableData(this.subprojectId);
      });
    },
    accessnterface() {
      let id = 1;
      console.log(this.showSearchValue2);
      if (this.showSearchValue2 === "") {
        this.$http.get("fishery").then((res) => {
          this.$http.get("fisheryImage?id=" + id).then((path) => {
            this.yeshu = res.data.data.records.length * 10;
            let result = {};
            result = res.data.data.records[this.nowYeShu - 1];

            // 获取图片
            this.$nextTick(() => {
              console.log(this.$refs.image1.src);
              this.$refs.image3.src =
                "http://120.77.156.205:9505/fishery/api/v1/fisheryImage/getStreamByTypeAndFisheryId?fisheryId=" +
                result.fisheryId +
                "&imageType=" +
                path.data.data.records[id - 1].imageType;

              this.$refs.image2.src =
                "http://120.77.156.205:9505/fishery/api/v1/fisheryImage/getStreamByTypeAndFisheryId?fisheryId=" +
                result.fisheryId +
                "&imageType=" +
                path.data.data.records[id].imageType;

              this.$refs.image1.src =
                "http://120.77.156.205:9505/fishery/api/v1/fisheryImage/getStreamByTypeAndFisheryId?fisheryId=" +
                result.fisheryId +
                "&imageType=" +
                path.data.data.records[id + 1].imageType;
            });
            this.tableData[0].SampleValue1 = result.chineseName;
            this.tableData[0].SampleValue2 = result.gang;
            this.tableData[0].SampleValue3 = result.habit;
            this.tableData[0].SampleValue4 = result.beiQi;
            this.tableData[0].SampleValue5 = result.length;
            this.tableData[0].SampleValue6 = result.weight;
            this.tableData[0].SampleValue7 = result.age;
            this.tableData[0].SampleValue9 = result.rstNumber;
            this.tableData[0].SampleValue10 = result.homeland;
            this.tableData[0].SampleValue11 = result.createdBy;
            this.tableData1[0].SampleValue12 = result.sampleType;

            this.tableData[1].SampleValue1 = result.englishName;
            this.tableData[1].SampleValue2 = result.mu;
            this.tableData[1].SampleValue3 = result.characteristics;
            this.tableData[1].SampleValue4 = result.tunQi;
            this.tableData[1].SampleValue5 = result.lengthBiWeight;
            this.tableData[1].SampleValue6 = result.lengthBiHead;
            this.tableData[1].SampleValue7 = result.measuringLength;
            this.tableData[1].SampleValue9 = result.rstCore;
            this.tableData[1].SampleValue10 = result.eastLongitude;
            this.tableData[1].SampleValue11 = result.modifiedBy;

            this.tableData[2].SampleValue1 = result.latinName;
            this.tableData[2].SampleValue2 = result.ke;
            this.tableData[2].SampleValue3 = result.appearance;
            this.tableData[2].SampleValue4 = result.shangLin;
            this.tableData[2].SampleValue5 = result.headBiMouth;
            this.tableData[2].SampleValue6 = result.headBiEyeRadius;
            this.tableData[2].SampleValue7 = result.measuringWeight;
            this.tableData[2].SampleValue9 = result.rstCoreFomulation;
            this.tableData[2].SampleValue10 = result.northernLatitude;
            this.tableData[2].SampleValu11 = result.createdTimes;

            this.tableData[3].SampleValue2 = result.shu;
            this.tableData[3].SampleValue4 = result.xiaLin;
            this.tableData[3].SampleValue5 = result.headBiEyeDistance;
            this.tableData[3].SampleValue6 = result.lengthBiTail;
            this.tableData[3].SampleValue9 = result.rstTunNumber;
            this.tableData[3].SampleValue11 = result.modifiedTime;

            this.tableData[4].SampleValue2 = result.zhong;
            this.tableData[4].SampleValue4 = result.saiPaShu;
            this.tableData[4].SampleValue5 = result.tailLengthBiTailHeight;
          });
        });
      } else {
        this.$http
          .get(
            "fishery?" +
              "parameterValue1=" +
              this.showSearchValue1 +
              "&queryParameter1=" +
              this.showSearchValue2
          )
          .then((res) => {
            this.$http.get("fisheryImage?id=" + id).then((path) => {
              this.yeshu = res.data.data.records.length * 10;
              let result = {};
              result = res.data.data.records[this.nowYeShu - 1];

              // 获取图片
              this.$nextTick(() => {
                console.log(this.$refs.image1.src);
                this.$refs.image3.src =
                  "http://120.77.156.205:9505/fishery/api/v1/fisheryImage/getStreamByTypeAndFisheryId?fisheryId=" +
                  result.fisheryId +
                  "&imageType=" +
                  path.data.data.records[id - 1].imageType;

                this.$refs.image2.src =
                  "http://120.77.156.205:9505/fishery/api/v1/fisheryImage/getStreamByTypeAndFisheryId?fisheryId=" +
                  result.fisheryId +
                  "&imageType=" +
                  path.data.data.records[id].imageType;

                this.$refs.image1.src =
                  "http://120.77.156.205:9505/fishery/api/v1/fisheryImage/getStreamByTypeAndFisheryId?fisheryId=" +
                  result.fisheryId +
                  "&imageType=" +
                  path.data.data.records[id + 1].imageType;
              });

              this.tableData[0].SampleValue1 = result.chineseName;
              this.tableData[0].SampleValue2 = result.gang;
              this.tableData[0].SampleValue3 = result.habit;
              this.tableData[0].SampleValue4 = result.beiQi;
              this.tableData[0].SampleValue5 = result.length;
              this.tableData[0].SampleValue6 = result.weight;
              this.tableData[0].SampleValue7 = result.age;
              this.tableData[0].SampleValue9 = result.rstNumber;
              this.tableData[0].SampleValue10 = result.homeland;
              this.tableData[0].SampleValue11 = result.createdBy;
              this.tableData1[0].SampleValue12 = result.sampleType;

              this.tableData[1].SampleValue1 = result.englishName;
              this.tableData[1].SampleValue2 = result.mu;
              this.tableData[1].SampleValue3 = result.characteristics;
              this.tableData[1].SampleValue4 = result.tunQi;
              this.tableData[1].SampleValue5 = result.lengthBiWeight;
              this.tableData[1].SampleValue6 = result.lengthBiHead;
              this.tableData[1].SampleValue7 = result.measuringLength;
              this.tableData[1].SampleValue9 = result.rstCore;
              this.tableData[1].SampleValue10 = result.eastLongitude;
              this.tableData[1].SampleValue11 = result.modifiedBy;

              this.tableData[2].SampleValue1 = result.latinName;
              this.tableData[2].SampleValue2 = result.ke;
              this.tableData[2].SampleValue3 = result.appearance;
              this.tableData[2].SampleValue4 = result.shangLin;
              this.tableData[2].SampleValue5 = result.headBiMouth;
              this.tableData[2].SampleValue6 = result.headBiEyeRadius;
              this.tableData[2].SampleValue7 = result.measuringWeight;
              this.tableData[2].SampleValue9 = result.rstCoreFomulation;
              this.tableData[2].SampleValue10 = result.northernLatitude;
              this.tableData[2].SampleValu11 = result.createdTimes;

              this.tableData[3].SampleValue2 = result.shu;
              this.tableData[3].SampleValue4 = result.xiaLin;
              this.tableData[3].SampleValue5 = result.headBiEyeDistance;
              this.tableData[3].SampleValue6 = result.lengthBiTail;
              this.tableData[3].SampleValue9 = result.rstTunNumber;
              this.tableData[3].SampleValue11 = result.modifiedTime;

              this.tableData[4].SampleValue2 = result.zhong;
              this.tableData[4].SampleValue4 = result.saiPaShu;
              this.tableData[4].SampleValue5 = result.tailLengthBiTailHeight;
            });
          });
      }
    },
  },
  created() {
    this.accessnterface();
  },
};
</script>

<style lang="less" scoped>
.global {
  height: 100%;
  background: url("../assets/background.jpeg");
  width: 100%;
  position: fixed;

  background-size: 100% 100%;
}
.mainBody {
  //  background-color: #000080;
  position: absolute;
  // height: 500px;
  top: 50%;
  left: 50%;
  margin: -225px 0 0 -400px;
}
.contourMap span {
  display: inline-block;
  //   margin: 1px;
  width: 50%;
  border-radius: 2px;
  border: 1px solid #ebeef5;
  // height: 100%;
}
.isozyme span {
  display: inline-block;
  //   margin: 1px;
  width: 50%;
  border-radius: 2px;
  border: 1px solid #ebeef5;
}
.chromosome span {
  display: inline-block;
  //   margin: 1px;
  width: 50%;
  border-radius: 2px;
  border: 1px solid #ebeef5;
  //   height: 70px;
}
.chromosome span img {
  height: 70px;
}
.contourMap span img {
  height: 70px;
}
.isozyme span img {
  height: 70px;
}
</style>
